<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色权限添加</title>
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/footer.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/thesame.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/page.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/popCss.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/role/css/role.css}"  media="all"/>
    <style type="text/css">
        /*取消选中效果*/
		div{
	    -moz-user-select:none;/*火狐*/
	    -webkit-user-select:none;/*webkit浏览器*/
	    -ms-user-select:none;/*IE10*/
	    -khtml-user-select:none;/*早期浏览器*/
	      user-select:none;
		}
    </style>
</head>
<script th:inline="javascript">var basePath = [[${#httpServletRequest.getContextPath()}]];</script>
<body>
<div class="add-title pad25px"><span onclick="returnRoleList()" class="mr10px" style="cursor: pointer;"><img th:src="@{/static/img/return_icon.png}"></span><span id="actionTitle">新建角色</span></div>
<div class="new-add-box new-add-box-width bgWhite box-shadows border-radius4">
	<!--<div class="new-add-box-scroll">-->
	<div class="">
		<div class="add-mess add-mess-con mar25px">
			<input id="roleNo" type="hidden"/>
			<div class="add-mess-child mr20px">
				<div>
					<label><em class="red">*</em>角色名称：</label>
				</div>
				<div class="add-mess-form">
					<p>
						<input style="width:280px" maxlength="20" id="roleName" onkeyup="value=value.replace(/[~!`?\/<>|@#$%^&*()+_=:]/g,'')" type="text" placeholder="请输入">
					</p>
				</div>
			</div>
			<div class="add-mess-child">
				<div>
					<label>角色描述：</label>
				</div>
				<div class="add-mess-form">
					<p>
						<input style="width:280px" maxlength="50" id="roleDesc" onkeyup="value=value.replace(/[~!`?\/<>|@#$%^&*()+_=:]/g,'')" type="text" placeholder="请输入">
					</p>
				</div>
			</div>
		</div>
		<div style="overflow-y: scroll;height: 286px;margin-right: -20px;" class="pl25px pr25px pb25px">
			<div class="module-con">
				<nav class="module-bav textCenter border-radius4 border1px mr15px">
					<p class="bgBlue-rgba fb border-top-radius4">平台板块</p>
					<ul class="plat">
						<li th:each="app,appstat:${appList}" th:class="${appstat.first}?'current':''" th:attr="data-id=${app.menu_no}" th:text="${app.name}"></li>
					</ul>
				</nav>
				<div class="layui-form layui-form-color border-radius4 border1px">
					<table border="0" cellspacing="0" cellpadding="0">
						<thead>
						<tr class="bgBlue-rgba textCenter">
							<th>一级模块</th>
							<th>二级模块</th>
							<th>操作权限</th>
						</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
<div class="layui-footer layui-footer-one">
	<div class="btn-con textCenter">
		<span class="btn-one" style="cursor: pointer;" onclick="returnRoleList()">取&nbsp;消</span>
		<span class="btn-two" style="cursor: pointer;" id="addBtn" onclick="addRole()">提&nbsp;交</span>
	</div>
</div>

<script type="text/javascript" th:src="@{/static/js/jquery-2.1.3.min.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/layuiCon.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/date.js}" charset="utf-8"></script>
<script>
	//layer初始化
	var layer;
	layui.use('layer', function(){
		layer = layui.layer;
	});

	//权限选择初始化
	var fuwu_no=$('.plat li').eq(0).data("id");
	var yanglao_no=$('.plat li').eq(1).data("id");
	var shuju_no=$('.plat li').eq(2).data("id");
	var zonghe_no=$('.plat li').eq(3).data("id");
	var fuwu_check='';
	var yanglao_check='';
	var shuju_check='';
	var zonghe_check='';

    $(function(){
		//新增修改初始化
		cuRoleInit();
		//板块切换
		tabSwitch();
		//选择浏览权限按钮初始化，当浏览按钮勾选时，后面才可以勾选
		checkFirstBtnInit();
    })


	/**
	 * 板块切换
	 */
	function tabSwitch(){
		$('.module-bav li').click(function(){
			var oldMenuNo =  $('.current').data("id");
			$(this).addClass('current').siblings().removeClass('current');
			var menuNo = $(this).data("id");
			//板块切换
			tableGrenate(menuNo);
			//设置上个板块勾选操作代码
			setPlatCheck(oldMenuNo);
		})
	}

    /**
     * table query
     */
    function tableGrenate(menuNo){
		//获取板块勾选操作代码
		var checkarr=getPlatCheck(menuNo);
		console.log("checkarr="+checkarr);
		$.ajax({
			type:"post",
			url:basePath+"/sysRole/getMenuList",
			dataType:"json",
			data:{"menuNo":menuNo},
			success:function(rst){
				console.log(rst);
				var html="";
				if(rst.code==0){
					$.each(rst.data,function(i,module){
						//总览不显示
						if(module.menu_no!=99){
							$.each(module.funcList, function(j,func){
								html+='<tr>';
								html+=(j==0?'<td style="width:126px" rowspan="'+module.funcCount+'">'+module.name+'</td>':'');
								html+=(module.funcCount==1?'<td style="width:160px"></td>':'<td style="width:160px">'+func.name+'</td>');
								html+='<td>';
								html+='<div>';
								$.each(func.btnList,function(k,btn){
									var btnName = btn.name;
									//var btnName = btn.name=='数据维护'?'数据维护（增|删|改）':btn.name;
									if(btn.menu_no==101){
										html+='<span><input type="checkbox" lay-filter="switchTest" checked="checked" disabled="disabled" name="plat'+menuNo+'" lay-skin="primary" data-id="'+btn.menu_no+'" title="'+btnName+'"></span>';
									}else{
										if(checkarr.indexOf(btn.menu_no)!=-1){
											html+='<span><input type="checkbox" lay-filter="switchTest" checked="checked" name="plat'+menuNo+'" lay-skin="primary" data-id="'+btn.menu_no+'" title="'+btnName+'"></span>';
										}else{
											html+='<span><input type="checkbox" lay-filter="switchTest" name="plat'+menuNo+'" lay-skin="primary" data-id="'+btn.menu_no+'" title="'+btnName+'"></span>';
										}
									}

								})
								html+='</div>';
								html+='</td>';
								html+='</tr>';
							})
						}
					})
				}
				if(menuNo==zonghe_no){
					$("tbody").attr("style","border-bottom: 1px solid #eee;");
				}else{
					$("tbody").removeAttr("style");
				}
				$("tbody").html(html);
				layui.use(['form'], function() {
					var form = layui.form;
					form.render('checkbox');
				});

			}
		})

    }

	/**
	 * 新增修改初始化
	 */
	function cuRoleInit(){
		var roleNo = '[[${roleNo}]]';
		if(!isNull(roleNo)){
			$.ajax({
				type:"post",
				url:basePath+"/sysRole/getRoleInfo",
				dataType:"json",
				data:{"roleId":roleNo},
				success:function(rst){
					$("#roleNo").val(rst.data.id);
					$("#roleName").val(rst.data.name);
					$("#roleDesc").val(rst.data.role_desc);
					$("#actionTitle").html("修改角色");
					$("title").html("角色权限修改");
					fuwu_check=rst.data.fuwuCat;
					yanglao_check=rst.data.yanglaoCat;
					shuju_check=rst.data.shujuCat;
					zonghe_check=rst.data.zongheCat;
					tableGrenate(fuwu_no);
				}
			})
		}else{
			tableGrenate(fuwu_no);
		}
	}

	/**
	 * 添加角色
	 */
	function addRole(){
		//设置当前板块勾选操作代码
		var menuNo =  $('.current').data("id");
		setPlatCheck(menuNo);
		setPlatCheck(yanglao_no);

		var roleNo = $("#roleNo").val();		//角色编号
		var roleName = $("#roleName").val();	//角色名称
		var roleDesc = $("#roleDesc").val();	//角色描述
		var menuArr = fuwu_check+yanglao_check+shuju_check+zonghe_check;	//勾选操作代码
		console.log("menuArr="+menuArr);

		if(isNull(roleName)){
			layer.msg("角色名称不能为空！");
			return;
		}
		if(isNull(menuArr)){
			layer.msg("权限功能尚未配置！");
			return;
		}

		var args=[];
		args.push(roleNo);
		args.push(roleName);
		args.push(roleDesc);
		args.push(menuArr);

		if(isNull(roleNo)){
			confirmCon("确认要新建角色吗？",addRoleCommit, args);
		}else{
			confirmCon("确认要修改角色吗？",addRoleCommit, args);
		}
	}

	/**
	 * 确认后提交
	 */
	function addRoleCommit(roleNo,roleName,roleDesc,menuArr){
		// console.log("roleNo="+roleNo);
		// console.log("roleName="+roleName);
		// console.log("roleDesc="+roleDesc);
		// console.log("meNuArr="+meNuArr);
		$.ajax({
			url:basePath + "/sysRole/save",
			type:"post",
			dataType:"json",
			data:{"roleNo":roleNo,"roleName":roleName,"roleDesc":roleDesc,"menuArr":menuArr},
			beforeSend: function(){
				$("#addBtn").css("pointer-events", "none");
			},
			success:function (data) {
				if(roleNo==null||roleNo==""){
					if(data.code==200){
						layer.msg("添加成功", {icon: 1, time:1500}, function () {
							window.location.href="../sysRole/listPage";
						});
					}else{
						layer.msg(data.msg, {icon: 2, time:1500});
					}
				}else{
					if(data.code==200){
						layer.msg("修改成功", {icon: 1, time:1500}, function () {
							window.location.href="../sysRole/listPage";
						});
					}else{
						layer.msg(data.msg, {icon: 2, time:1500});
					}
				}
				$("#addBtn").css("pointer-events", "auto");
			}
		})
	}

	/**
	 * 获取板块勾选操作代码
	 */
	function getPlatCheck(menuNo){
		console.log("getPlatCheck="+menuNo);
		console.log("zonghe_no="+zonghe_no);
		if(menuNo==fuwu_no){
			return fuwu_check;
		}else if(menuNo==yanglao_no){
			return yanglao_check;
		}else if(menuNo==shuju_no){
			return shuju_check;
		}else if(menuNo==zonghe_no){
			return zonghe_check;
		}else{
			return '';
		}
	}

	/**
	 * 设置板块勾选操作代码
	 */
	function setPlatCheck(menuNo){
		var checkarr="";
		$('[name=plat'+menuNo+']:checkbox:checked').each(function(){
			checkarr+=$(this).data("id")+"|";
		});
		if(menuNo==fuwu_no){
			fuwu_check=checkarr;
		}else if(menuNo==yanglao_no){
			if(checkarr.length>0){
				yanglao_check="101|"+checkarr;
			}else{
				yanglao_check=checkarr;
			}
		}else if(menuNo==shuju_no){
			shuju_check=checkarr;
		}else if(menuNo==zonghe_no){
			zonghe_check=checkarr;
		}
	}


    /**
	 * 判断是否
	 */
    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }


	/**
	 * 返回列表
	 */
	function returnRoleList(){
		window.location.href=basePath+"/sysRole/listPage";
	}

	/**
	 * 选择浏览权限按钮初始化，当浏览按钮勾选时，后面才可以勾选
	 */
	function checkFirstBtnInit(){
		layui.use(['form', 'jquery' ], function () {
			$ = layui.jquery;
			form = layui.form;
			//监听多选框点击事件
			form.on('checkbox(switchTest)', function (data) {
				var first = $(this).parent().parent().find("input").first();
				var first_status = $(first).prop("checked");
				var select_status = $(this).prop("checked");
				if(first_status==false){
					$(this).parent().parent().find("input").each(function(){
						$(this).removeAttr("checked");
					});
				}
				form.render('checkbox');

			});
		})
	}




</script>
</body>
</html>
